.pxToRem(@p, @px) {
    @{p}: @px / 75 * 1rem;
}
#head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .pxToRem(height,100);
    background: #fff;
    .head-sp1 {
        .pxToRem(width,55);
        .pxToRem(height,55);
        .pxToRem(margin-left,10);
        .pxToRem(font-size,34);
        img {
            width: 100%;
        }
    }
    .head-sp2 {
         .pxToRem(font-size,34);
    }
}
.main{
    width: 100%;
     display: flex;
    justify-content:center;
    align-items: center;
    .pxToRem(margin-top,100);
     flex-flow: wrap;
     a{  
         width: 29.333%;
        
    dl{
       width: 100%;
        margin-left: 2%;
            margin-right: 2%;
            text-align: center;
             .pxToRem(margin-top,30);
             .pxToRem(margin-bottom,30);
           
            .dt {
                display: flex;
                justify-content: center;
                align-items: center;
                .pxToRem(margin-bottom,15); 
                img {
                    width: 100%;
                }
            }
    }
    }
}

.yj {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-flow: wrap;
    border-bottom: 2px solid #CCCCCC;
    .pxToRem(height,100);
    text-align: center;
    background: #FFFFFF;
    .dl {
        width: 20%;
        text-align: center;
        .dt {
            .pxToRem(height,70);
            .pxToRem(width,180);
            img {
               .pxToRem(height,70);
            .pxToRem(width,70);
            }
        }
        dd {
            text-align: center;
            .pxToRem(width,180);
            .pxToRem(font-size,25);
            .pxToRem(margin-top,5);
        }
    }
}
